<template>
	<view class="center">
		<view class="tu">
			<image alt="" mode="cover" src="../../static/images/tu.png">
		</view>
		<view class="shen">
			<i class="iconfont" style="padding: 0 10rpx;color: rgb(0,122,255);">&#xe689;</i>
			<view>审批管理</view>
		</view>
		<view class="ying">
			<view class="xiao" @click="handleXiu">
				<i class="iconfont" style="color: rgb(254,130,122);">&#xe716;</i>
				<view>报修申请</view>
			</view>
			<view class="xiao" @click="handleXiao">
				<i class="iconfont" style="color: rgb(27,182,150);">&#xe648;</i>
				<view>报销申请</view>
			</view>
			<view class="xiao" @click="handleShen">
				<i class="iconfont" style="color: rgb(23,171,227);">&#xe600;</i>
				<view>申购申请</view>
			</view>
			<view class="xiao" @click="handleYong">
				<i class="iconfont" style="color: rgb(59,168,252);">&#xe639;</i>
				<view>用车申请</view>
			</view>
			<view class="xiao" @click="handleLing">
				<i class="iconfont" style="color: rgb(0,180,255);">&#xe66b;</i>
				<view>领用申请</view>
			</view>
			<view class="xiao" @click="handleJia">
				<i class="iconfont" style="color: rgb(63,140,227);">&#xe601;</i>
				<view>请假申请</view>
			</view>
		</view>
		<view class="shen">
			<i class="iconfont" style="padding: 0 10rpx;color: rgb(0,122,255);">&#xe689;</i>
			<view>日常管理</view>
		</view>
		<view class="ying">
			<view class="xiao" @click="handleCar">
				<i class="iconfont" style="color: rgb(61,213,187);">&#xe62b;</i>
				<view>车辆管理</view>
			</view>
			<view class="xiao" @click="handleJiang">
				<i class="iconfont" style="color: rgb(51,154,205);">&#xe60e;</i>
				<view>奖惩管理</view>
			</view>
			<view class="xiao" @click="handleShe">
				<i class="iconfont" style="color: rgb(58,134,255);">&#xe60c;</i>
				<view>社保管理</view>
			</view>
			<view class="xiao" @click="handleXin">
				<i class="iconfont" style="color: rgb(253,196,54);">&#xe602;</i>
				<view>新闻动态</view>
			</view>
			<view class="xiao" @click="handleGui">
				<i class="iconfont" style="color: rgb(62,209,194);">&#xe605;</i>
				<view>规则制度</view>
			</view>
			<view class="xiao" @click="handleYe">
				<i class="iconfont" style="color: rgb(0,153,206);">&#xe664;</i>
				<view>业务知识</view>
			</view>
			<view class="xiao" @click="handleAn">
				<i class="iconfont" style="color: rgb(33,150,243);">&#xe649;</i>
				<view>安全生产</view>
			</view>
		</view>

	</view>
</template>

<script>
import {listNews} from "@/api/system/news";

export default {
		data() {
			return {
				reads: "",
				items: [],
			}
		},
		onLoad() {
			this.footMsgFun() //调用底部方法
		},
		onShow() {
			this.footMsgFun() //调用底部方法
		},
		methods: {
			handleXiu() {
				this.$tab.navigateTo('/pages/center/repairs/repairs')
			},
			handleXiao() {
				this.$tab.navigateTo('/pages/center/claim/claim')
			},
			handleShen() {
				this.$tab.navigateTo('/pages/center/subscribe/subscribe')
			},
			handleYong() {
				this.$tab.navigateTo('/pages/center/vehicle/vehicle')
			},
			handleLing() {
				this.$tab.navigateTo('/pages/center/receive/receive')
			},
			handleJia() {
				this.$tab.navigateTo('/pages/center/leave/leave')
			},
			handleCar() {
				this.$tab.navigateTo('/pages/center/car/car')
			},
			handleJiang() {
				this.$tab.navigateTo('/pages/center/rewards/rewards')
			},
			handleShe() {
				this.$tab.navigateTo('/pages/center/security/security')
			},
			handleXin() {
				this.$tab.navigateTo('/pages/center/journalism/journalism')
			},
			handleGui() {
				this.$tab.navigateTo('/pages/center/regulations/regulations')
			},
			handleYe() {
				this.$tab.navigateTo('/pages/center/business/business')
			},
			handleAn() {
				this.$tab.navigateTo('/pages/center/safety/safety')
				// this.$modal.showToast('模块建设中~')
			},
			getList() {
				listNews(this.queryParams).then(response => {
					this.items = response.rows;
					this.reads = this.items.reduce((accumulator, item) => {
						if (item.newsRead === 0) {
							return accumulator + 1; // 如果newsRead等于0，累加器加1
						}
						return accumulator; // 否则返回当前累加器的值
					}, 0); // 初始累加器的值设为0

					console.log('未读新闻数量:', this.reads);
					this.footMsgFun();
				});
			},
			footMsgFun() {
				if (this.reads > 0) {
					uni.setTabBarBadge({
						index: 3,
						text: this.reads.toString(),
					});
				} else {
					uni.removeTabBarBadge({
						index: 3,
					});
				}
			}
		},
		created() {
			this.getList();
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f6f7;
	}

	.center {
		// background-color: antiquewhite;


		.tu {
			padding: 10rpx 35rpx;
			height: 320rpx;
			width: 100%;

			image {
				background-size: cover;
				height: 300rpx;
				width: 100%;
			}
		}

		.shen {
			margin: 0 25rpx;
			padding-left: 15rpx;
			height: 80rpx;
			line-height: 80rpx;
			border: rgb(235, 235, 235) 1px solid;
			border-radius: 5%;
			font-size: 15px;


			view {
				display: inline-block;
			}
		}

		.ying {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;

			.xiao {
				width: 140rpx;
				height: 150rpx;
				margin: 50rpx 0 20rpx 40rpx;
				padding: 10rpx;


				i {
					font-size: 80rpx;
					// color: rgb(0, 122, 255);
					padding: 10rpx 10rpx 10rpx 20rpx;

				}

				view {
					text-align: center;
				}
			}
		}
	}
</style>